<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
</head>
<body class="font-sans dark:bg-gray-900 min-h-screen">
    <nav class="p-4 border-b border-gray-300">
        <div class="mx-auto max-w-[1200px] flex justify-between">
            <a class="text-gray-800 dark:text-gray-300 text-3xl font-bold" href="index">
                <h1>Hello石狐</h1>
            </a>
            <div class="text-gray-800 dark:text-gray-300 items-center flex space-x-3">
                <a href="#" class="hover:text-gray-500">首页</a>
                <a href="#" class="hover:text-gray-500">关于我</a>
                <a href="#" class="hover:text-gray-500">分类</a>
                <a href="#" class="hover:text-gray-500">联系我</a>
            </div>
        </div>
    </nav>

    <header class="py-20">
        <div class="mx-auto max-w-[1200px] text-center px-10 pb-20 text-gray-800 dark:text-gray-300">
            <h1 class="text-4xl mb-4">欢迎来到我的博客</h1>
            <p class="text-xl mb-4">使用Bootstrap构建的响应式博客网站</p>
            <a class="text-center text-lg border rounded-lg p-2" onclick="document.documentElement.classList.toggle('dark')">黑暗模式</a>
        </div>
    </header>

    <main class="mb-auto">
        <div class="mx-auto max-w-[1200px] flex justify-center py-10">
            <div class="w-9/12">
                <div class="article-list">
                    <div class="article-item mb-8">
                        <div class="article-title text-xl font-bold mb-1 text-gray-800 dark:text-gray-300">
                            <a href="#" class="hover:underline">Node.js 创建一个服务端应用</a>
                        </div>
                        <div class="article-meta text-gray-600 dark:text-gray-600">
                            <ul class="flex space-x-2">
                                <li>2025-07-21</li>
                                <li>开发</li>
                                <li>2 阅读</li>
                                <li>0 回复</li>
                                <li>0 赞</li>
                            </ul>
                        </div>
                        <div class="article-body py-4 mb-1 text-gray-800 dark:text-gray-300">
                            <p>
                                一直听说Javascript 配合上Node.js能轻松的构建一个后端应用，而且还是一个全栈工程师最常用的组合技，今天看了篇教程，随之将构建的过程记录下来 选择web框架 第一步需要选择一个web应用框架，需要明确的是Node.js是一个运行时环境，JavaScript是编程语言，通常为了方便
                            </p>
                        </div>
                        <hr class="border-t border-gray-300">
                    </div>
    
                    <div class="article-item mb-8">
                        <div class="article-title text-xl font-bold mb-1 text-gray-800 dark:text-gray-300">
                            <a href="#" class="hover:underline">Node.js 创建一个服务端应用</a>
                        </div>
                        <div class="article-meta text-gray-600">
                            <ul class="flex space-x-2">
                                <li>2025-07-21</li>
                                <li>开发</li>
                                <li>2 阅读</li>
                                <li>0 回复</li>
                                <li>0 赞</li>
                            </ul>
                        </div>
                        <div class="article-body py-3 mb-1 text-gray-800 dark:text-gray-300">
                            <p>
                                一直听说Javascript 配合上Node.js能轻松的构建一个后端应用，而且还是一个全栈工程师最常用的组合技，今天看了篇教程，随之将构建的过程记录下来 选择web框架 第一步需要选择一个web应用框架，需要明确的是Node.js是一个运行时环境，JavaScript是编程语言，通常为了方便
                            </p>
                        </div>
                        <hr class="border-t border-gray-300">
                    </div>
    
    
                    <div class="article-item mb-8">
                        <div class="article-title text-xl font-bold mb-1 text-gray-800 dark:text-gray-300">
                            <a href="#" class="hover:underline">Node.js 创建一个服务端应用</a>
                        </div>
                        <div class="article-meta">
                            <ul class="flex space-x-2">
                                <li>2025-07-21</li>
                                <li>开发</li>
                                <li>2 阅读</li>
                                <li>0 回复</li>
                                <li>0 赞</li>
                            </ul>
                        </div>
                        <div class="article-body py-4 mb-1 text-gray-800 dark:text-gray-300">
                            <p>
                                一直听说Javascript 配合上Node.js能轻松的构建一个后端应用，而且还是一个全栈工程师最常用的组合技，今天看了篇教程，随之将构建的过程记录下来 选择web框架 第一步需要选择一个web应用框架，需要明确的是Node.js是一个运行时环境，JavaScript是编程语言，通常为了方便
                            </p>
                        </div>
                        <hr class="border-t border-gray-300">
                    </div>
                </div>

                <div class="flex items-center text-sm text-gray-700 justify-center space-x-1">
                    <!-- 上一页 -->
                    <a href="#" class="px-4 py-2 rounded-md hover:bg-gray-300">
                      上一页
                    </a>
                  
                    <!-- 页码 -->
                    <a href="#" class="px-4 py-2  rounded-md hover:bg-gray-300 hover:border-gray-300">
                      1
                    </a>
                    <a href="#" class="px-4 py-2 text-gray-500 bg-gray-300 rounded-md hover:border-gray-300">
                      2
                    </a>
                    <a href="#" class="px-4 py-2 rounded-md hover:bg-gray-300 hover:border-gray-300">
                      3
                    </a>
                    <a href="#" class="px-4 py-2 rounded-md hover:bg-gray-300 hover:border-gray-300">
                      4
                    </a>
                  
                    <!-- 下一页 -->
                    <a href="#" class="px-4 py-2 rounded-md hover:bg-gray-300">
                      下一页
                    </a>
                  </div>
                  
                  
            </div>

            <div class="sider w-3/12 pl-10 text-gray-600 lg:block hidden space-y-6">
                <div class="sider-group1">
                    <div class="font-bold">
                        <h2>最近更新</h2>
                    </div>
                    <div class="my-2">
                        <ul class="space-y-2">
                            <li>Node.js 创建一个服务端应用</li>
                            <li>Java Stream API</li>
                            <li>Lambda表达式（Java）</li>
                        </ul>
                    </div>
                </div>

                <div class="sider-group2">
                    <div class="font-bold">
                        <h2>标签云</h2>
                    </div>
                    <div class="my-2">
                        <ul class="flex flex-wrap gap-2">
                            <li>Java</li>
                            <li>Node.js</li>
                            <li>JavaScript</li>
                            <li>旅游</li>
                            <li>健身</li>
                            <li>健康</li>
                        </ul>
                    </div>
                </div>

                <div class="sider-group3">
                    <div class="font-bold">
                        <h2>最新回复</h2>
                    </div>
                    <div class="my-2">
                        <ul class="space-y-2">
                            <li>Node.js 创建一个服务端应用</li>
                            <li>Java Stream API</li>
                            <li>Lambda表达式（Java）</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </main>

    <footer class="bg-gray-700 text-center py-10">
        <h2 class="text-xl text-white">© 2023 博客演示 - 使用Tailwind构建</h2>
    </footer>

    <script>
        // fetch data...
    </script>

</body>
</html>
